<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
    <link rel="stylesheet" href="../../admin/css/other/console2.css"/>
</head>
<body class="pear-container">
<div class="layui-row layui-col-space10">
    <div class="layui-col-md8">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        快捷菜单
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home1" data-title="在线用户"
                                     data-url="view/system/onlineUser.html">
                                    <i class="layui-icon layui-icon-group"></i>
                                </div>
                                <span class="pear-card-title">在线用户</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home2" data-title="待办任务"
                                     data-url="view/flow/taskList.html">
                                    <i class="layui-icon layui-icon-email"></i>
                                </div>
                                <span class="pear-card-title">待办任务</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home2" data-title="访问日志" data-url="view/ext/log.html">
                                    <i class="layui-icon layui-icon-time"></i>
                                </div>
                                <span class="pear-card-title">访问日志</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home3" data-title="NginxUI"
                                     data-url="view/system/nginx.html">
                                    <i class="layui-icon layui-icon-template-1"></i>
                                </div>
                                <span class="pear-card-title">NginxUI</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home4" data-title="配套专栏"
                                     data-url="https://blog.csdn.net/abu935009066/category_10817814.html">
                                    <i class="layui-icon layui-icon-heart-fill"></i>
                                </div>
                                <span class="pear-card-title">配套专栏</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home5" data-title="源码下载"
                                     data-url="https://gitee.com/lakernote/easy-admin">
                                    <i class="layui-icon layui-icon-website"></i>
                                </div>
                                <span class="pear-card-title">源码下载</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home6" data-title="请假申请" data-url="view/ext/leave.html">
                                    <i class="layui-icon layui-icon-table"></i>
                                </div>
                                <span class="pear-card-title">请假申请</span>
                            </div>
                            <div class="layui-col-md3 layui-col-sm3 layui-col-xs3">
                                <div class="pear-card" data-id="home7" data-title="应用监控" data-url="/monitoring">
                                    <i class="layui-icon layui-icon-chart-screen"></i>
                                </div>
                                <span class="pear-card-title">应用监控</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md6">
                <div class="layui-card">
                    <div class="layui-card-header">
                        快捷数据
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row layui-col-space10">
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">待办任务</div>
                                    <div class="count pear-text" id="card1">1</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">已办任务</div>
                                    <div class="count pear-text" id="card2">1</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">IP总数</div>
                                    <div class="count pear-text" id="card3">1</div>
                                </div>
                            </div>
                            <div class="layui-col-md6 layui-col-sm6 layui-col-xs6">
                                <div class="pear-card2">
                                    <div class="title">在线人数</div>
                                    <div class="count pear-text" id="card4">1</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-body">
                        <div class="layui-tab custom-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                            <div id="echarts-records" style="background-color:#ffffff;min-height:400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-card">
                    <div class="layui-card-header">
                        最近一天Top10访问IP
                    </div>
                    <div class="layui-card-body">
                        <table id="role-table" lay-filter="role-table"></table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-col-md4">
        <div class="layui-card">
            <div class="layui-card-header">公告</div>
            <div class="layui-card-body">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>配套博文专栏</legend>
                </fieldset>

                <blockquote class="layui-elem-quote">
                    <a style="color: #00b487" href="https://blog.csdn.net/abu935009066/category_10817814.html">📕 从零搭建开发脚手架👉点击跳转</a>
                    <br>
                    <br>
                    <a style="color: #00b487" href="https://space.bilibili.com/502919442">📗 B站配套视频👉点击跳转</a>
                </blockquote>

                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
                    <legend>功能建议 - BUG反馈</legend>
                </fieldset>

                <blockquote class="layui-elem-quote">

                    <span style="font-size: large;font-family: cursive;">个人微信【lakernote】</span>
                    <br>
                    <span style="font-size: large;font-family: cursive;">公众号【Java大厂面试官】</span>
                </blockquote>
                <img src="../../admin/images/wx.jpg">
            </div>
        </div>
    </div>
</div>
<!--</div>-->
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<script>
    layui.use(['echarts', 'element', 'easyAdmin'], function () {
        var $ = layui.jquery,
            element = layui.element,
            echarts = layui.echarts,
            easyAdmin = layui.easyAdmin;


        easyAdmin.httpGet("/sys/statistics/console",function (res) {
            let data = res.data;
            $('#card1').text(data.todo);
            $('#card2').text(data.done);
            $('#card3').text(data.ip);
            $('#card4').text(data.online);
        })


        let cols = [
            [
                {
                    title: 'IP地址',
                    field: 'ip',
                    align: 'center'
                },
                {
                    title: '城市及网络',
                    field: 'city',
                    align: 'center'
                },
                {
                    title: '次数',
                    field: 'value',
                    align: 'center'
                }
            ]
        ]

        easyAdmin.tableRender({
            elem: '#role-table',
            url: '/ext/log/visitsTop10IP',
            page: false,
            cols: cols,
            toolbar: null,
            defaultToolbar: null
        });


        var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

        $("body").on("click", "[data-url]", function () {
            parent.layui.tab.addTabOnlyByElem("content", {
                id: $(this).attr("data-id"),
                title: $(this).attr("data-title"),
                url: $(this).attr("data-url"),
                close: true
            })
        })


        let bgColor = "#fff";
        let color = [
            "#0090FF",
            "#36CE9E",
            "#FFC005",
            "#FF515A",
            "#8B5CFF",
            "#00CA69"
        ];
        easyAdmin.httpGet("/ext/log/visits7day", function (data) {
            let echartData = data.data;


            let xAxisData = echartData.map(v => v.date);
            //  ["1", "2", "3", "4", "5", "6", "7", "8"]
            let yAxisData1 = echartData.map(v => v.value);
            // [100, 138, 350, 173, 180, 150, 180, 230]
            const hexToRgba = (hex, opacity) => {
                let rgbaColor = "";
                let reg = /^#[\da-f]{6}$/i;
                if (reg.test(hex)) {
                    rgbaColor =
                        `rgba(${parseInt("0x" + hex.slice(1, 3))},${parseInt(
                            "0x" + hex.slice(3, 5)
                        )},${parseInt("0x" + hex.slice(5, 7))},${opacity})`;
                }
                return rgbaColor;
            }

            option = {
                backgroundColor: bgColor,
                color: color,
                legend: {
                    right: 10,
                    top: 10
                },
                tooltip: {
                    trigger: "axis",
                    formatter: function (params) {
                        let html = '';
                        params.forEach(v => {
                            console.log(v)
                            html +=
                                `<div style="color: #666;font-size: 14px;line-height: 24px">
					                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color[v.componentIndex]};"></span>
					                ${v.seriesName}.${v.name}
					                <span style="color:${color[v.componentIndex]};font-weight:700;font-size: 18px">${v.value}</span>
					                次`;
                        })


                        return html
                    },
                    extraCssText: 'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: '#ffffff',
                            shadowColor: 'rgba(225,225,225,1)',
                            shadowBlur: 5
                        }
                    }
                },
                grid: {
                    top: 100,
                    containLabel: true
                },
                xAxis: [{
                    type: "category",
                    boundaryGap: false,
                    axisLabel: {
                        formatter: '{value}',
                        textStyle: {
                            color: "#333"
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: "#D9D9D9"
                        }
                    },
                    data: xAxisData
                }],
                yAxis: [{
                    type: "value",
                    name: '',
                    axisLabel: {
                        textStyle: {
                            color: "#666"
                        }
                    },
                    nameTextStyle: {
                        color: "#666",
                        fontSize: 12,
                        lineHeight: 40
                    },
                    splitLine: {
                        lineStyle: {
                            type: "dashed",
                            color: "#E9E9E9"
                        }
                    },
                    axisLine: {
                        show: false
                    },
                    axisTick: {
                        show: false
                    }
                }],
                series: [{
                    name: "最近7天系统功能访问量",
                    type: "line",
                    smooth: true,
                    // showSymbol: false,/
                    symbolSize: 8,
                    zlevel: 3,
                    lineStyle: {
                        normal: {
                            color: color[0],
                            shadowBlur: 3,
                            shadowColor: hexToRgba(color[0], 0.5),
                            shadowOffsetY: 8
                        }
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [{
                                    offset: 0,
                                    color: hexToRgba(color[0], 0.3)
                                },
                                    {
                                        offset: 1,
                                        color: hexToRgba(color[0], 0.1)
                                    }
                                ],
                                false
                            ),
                            shadowColor: hexToRgba(color[0], 0.1),
                            shadowBlur: 10
                        }
                    },
                    data: yAxisData1
                }]
            };

            echartsRecords.setOption(option);
        });
        window.onresize = function () {
            echartsRecords.resize();
        }

    });
</script>
</body>
</html>
